<template>
  <FormDefinitionEditorLayout>
    <FormDefinitionComponentList :formDefinition="innerFormDefinition" slot="left"/>
    <FormDefinitionDesigner :formDefinition="innerFormDefinition"/>
    <FormDefinitionFieldProperties @beforeSave="beforeSave" :field="field" :formDefinition="innerFormDefinition" slot="right"/>
    <FormDefinitionDesignerFooter
        :editingView="editingView" @change="editingViewChane" slot="footer"
        :formDefinition="innerFormDefinition"/>
  </FormDefinitionEditorLayout>
</template>
<script>
import FormDefinitionEditorLayout from "@/components/FormDefinitionEditor/FormDefinitionEditorLayout.vue";
import FormDefinitionComponentList from "@/components/FormDefinitionEditor/FormDefinitionComponentList.vue";
import FormDefinitionFieldProperties from "@/components/FormDefinitionEditor/FormDefinitionFieldProperties.vue";
import FormDefinitionDesigner from "@/components/FormDefinitionEditor/FormDefinitionDesigner.vue";
import {createModelForVue, createProps} from "@/utils";
import {createFormDefinition} from "@/components/form/type";
import FormDefinitionEditor from "@/components/FormDefinitionEditor/FormDesignDrag";
import FormDefinitionDesignerFooter from "@/components/FormDefinitionEditor/FormDefinitionDesignerFooter.vue";
import $ from 'jquery'

export default {
  name: 'FormDefinitionEditor',
  components: {
    FormDefinitionDesignerFooter,
    FormDefinitionDesigner,
    FormDefinitionFieldProperties,
    FormDefinitionComponentList,
    FormDefinitionEditorLayout
  },
  model: createModelForVue('formDefinition'),
  props: {
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      drag: undefined,
      field: undefined,
      editingView: undefined
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.bindDrag()
    })
  },
  methods: {
    beforeSave() {
      this.resolveCurrentViewHtml();
    },
    bindDrag() {
      let drag = this.drag || new FormDefinitionEditor(this);
      drag.bind();
      this.drag = drag;
    },
    change(v) {
      this.$emit('change', v);
    },
    onSelectField(field) {
      this.field = field
    },
    onClearSelectField() {
      this.field = undefined
      this.drag.bind();
    },
    onCreateField(field) {
      this.formDefinition.fields.push(field);
    },
    getFormDefinition() {
      return this.innerFormDefinition;
    },
    editingViewChane(v) {
      this.resolveCurrentViewHtml()
      this.$nextTick(() => {
        this.editingView = v
        this.setCurrentViewHtml()
        this.bindDrag()
      })
    },
    setCurrentViewHtml() {
      if (!this.editingView) return
      $('[data-role="root"]').html(this.editingView.html || ' ');
    },
    resolveCurrentViewHtml() {
      if (!this.editingView) return
      this.editingView.html = $('[data-role="root"]').html()
    },
  },
  computed: {
    innerFormDefinition: {
      get() {
        let res = this.formDefinition || createFormDefinition();
        this.change(res);
        return res;
      },
      set(v) {
        debugger
        this.change(v);
      },
    }
  }
};
</script>